<template>
  <div class="chat-view">
    <!-- 对话管理侧边栏 -->
    <Sidebar
        :show-sidebar="showSidebar"
        @toggle-sidebar="toggleSidebar"
    />

    <!-- 主界面 -->
    <div :class="['chat-main', { 'main-expanded': !showSidebar }]">
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref} from 'vue'

import Sidebar from './Sidebar.vue'


// 边栏状态
const showSidebar = ref(true)


const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
}

</script>

<style scoped>
.chat-view {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
  margin-left: 300px;
  height: 100%;
  overflow: hidden;
}

.main-expanded {
  margin-left: 0;
}

.el-main{
  padding: 0px;
}

@media (max-width: 768px) {
  .chat-main {
    margin-left: 0;
  }
}
</style>